<template>
  <div class="form-wrapper sign-up">
    <form @submit.prevent="onRegister">
      <h2>Register</h2>
      <div class="input-group">
        <input type="text" required v-model="username">
        <label>Username</label>
      </div>
      <div class="input-group">
        <input type="email" required v-model="email">
        <label>Email</label>
      </div>
      <div class="input-group">
        <input type="password" required v-model="password">
        <label>Password</label>
      </div>
      <button type="submit">Sign Up</button>
      <div class="SignUp-link">
        <p>Already have an account? <router-link to="/login" class="signInBtn-link">Sign In</router-link></p>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
      password: ''
    };
  },
  methods: {
    onRegister() {
      // Handle registration
      console.log('Registering:', this.username, this.email, this.password);
    }
  }
}
</script>

<style scoped>
.form-wrapper {
    width: 400px;
    background: rgba(255, 255, 255, .2);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(0, 0, 0, .1);
    transition: transform 1s ease-in-out;
}
.input-group {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}
.input-group input {
    width: 100%;
    padding: 10px;
    border: none;
    background: none;
    outline: none;
    color: #fff;
    font-size: 18px;
}
.input-group label {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: 0.5s;
    color: #fff;
}
.input-group input:focus ~ label,
.input-group input:valid ~ label {
    top: -20px;
    font-size: 12px;
}
button {
    width: 100%;
    padding: 15px;
    border: none;
    background: #f4157e;
    color: white;
    font-size: 18px;
    cursor: pointer;
    border-radius: 30px;
    outline: none;
}
.SignUp-link p {
    text-align: center;
    color: #fff;
}
.SignUp-link a {
    color: #f4157e;
    text-decoration: none;
}
.SignUp-link a:hover {
    text-decoration: underline;
}
.wrapper.active .form-wrapper .sign-up {
    transform: scale(1); /* Shown when active */
}
</style>